<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
      vertical-align: top;
      outline-style: none;
    }
    .wrap{
      width: 1200px;
      height: 500px;
      margin: 100px auto;
    }
    .slide{
      height: 500px;
      position: relative;
    }
    .slide li{
      position: absolute;
      left: 200px;
      top: 0;
    }
    .slide li img{
      width: 100%;
    }
    .arrow{
      position: absolute;
      top: 200px;
      z-index: 1000; 
      opacity: 0; 
    }
    .prev, .next{
      width: 76px;
      height: 112px;
      position: absolute;
      top: 50%;
      background:url('images/prev.png') no-repeat;
    }
    .arrow .next{
      left:1120px;
      right: 0px;
      background:url('images/next.png') no-repeat;
    }
    a{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="wrap" id="wrap">
    <div class="slide" id="slide">
      <ul>
        <li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
        <li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
      </ul>
    </div>
    <div class="arrow" id="arrow">
      <a href="javascript:;" class="prev" id="arrLeft"></a>
      <a href="javascript:;" class="next" id="arrRight"></a>
    </div>
  </div>
  <script src="../../jquery-1.12.4.min.js"></script>
  <script>
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      },//4
    ]//config其实就是一个配置单 规定了每张图片的大小位置层级透明度
    //实现
    //1.设置每个li根据config的位置进行对应运动
    var $lis = $('li');
    // - 每个li的运动位置不同，需要进行遍历操作
    $lis.each(function(i,ele){
      $(ele).stop().animate(config[i]);
    });
    //2 大盒子进入和离开，设置左右箭头父盒子透明度修改
    //  - 事件冒泡会导致箭头盒子出现动画重复触发，可以设置为mouseenter和mouseleave
    var $arrow = $('#arrow');//箭头父盒子
    $('#wrap').mouseenter(function(){
      $arrow.stop().animate({opacity: 1});
    })
    .mouseleave(function(){
      $arrow.stop().animate({opacity: 0});
    });
    //3 设置左右按钮点击操作
    $('#arrRight').click(function(){
      //将config的元素进行移动(从前向后移动)
      config.push(config.shift());
      //因为位置发生变化 所以要重新遍历数组
      $lis.each(function(i,ele){
        $(ele).stop().animate(config[i]);
      });
    });
    $('#arrLeft').click(function(){
      //将config的元素进行移动(从后向前移动)
      config.unshift(config.pop());
      //因为位置发生变化 所以要重新遍历数组
      $lis.each(function(i,ele){
        $(ele).stop().animate(config[i]);
      })
    });
  </script>
</body>
</html>